<template>
  <div>
    <div class="myimage"><h1>我的个人资料</h1></div>
    <el-divider></el-divider>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
		<el-form-item label="UID:">
		  {{user.uid}}
		</el-form-item>
		<el-form-item label="用户名:">
	   {{user.username}}
		</el-form-item>
		<el-form-item label="昵称:">
		{{user.nickname}}
		</el-form-item>
	  <el-form-item label="手机号:">
	  	{{user.phone}}
	   </el-form-item>
	   <el-form-item label="邮箱:">
	   	{{user.email}}
	    </el-form-item>
		
        <el-form-item>
            <el-button style="width: 110px;" type="info" @click="getUser(user.uid)">更改</el-button>
          </el-form-item>
    </el-form>
	
	<!-- 修改用户信息话框 -->
	<el-dialog title="修改个人信息" :visible.sync="updateUser" width="40%">
	  <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px">
	    <el-form-item label="昵称" prop="nickname">
	      <el-input placeholder="请输入昵称" v-model="userForm.nickname"></el-input>
	    </el-form-item>
	    <el-form-item label="手机号" prop="phone">
	      <el-input placeholder="请输入手机号" v-model="userForm.phone"></el-input>
	    </el-form-item>
	    <el-form-item label="邮箱" prop="email">
	      <el-input placeholder="请输入邮箱号" v-model="userForm.email"></el-input>
	    </el-form-item>
	    <el-form-item style="text-align: center;">
	      <el-button type="primary" style="width: 150px;" @click="submitUpdate('userForm')">修 改</el-button>
	    </el-form-item>
	  </el-form>
	</el-dialog>
  </div>
</template>

<script>
  export default{
    name:'Minemsg',
    data() {
          return {
            labelPosition: 'right',
            formLabelAlign: {
              sex: '男'
            },
			//
			updateUser: false,
			//回显用户数据
			userForm: {},
			
			user:{
				uid:'',
				username :'',
				nickname: '',
				phone: '',
				email: ''
			},
			rules: {
			  nickname: [{
			    required: true,
			    message: '昵称不能为空',
			    trigger: 'blur'
			  },
			    {
			      max: 20,
			      message: '长度在20个字符',
			      trigger: 'blur'
			    }
			  ],
			  username: [{
			    required: true,
			    message: '用户名不能为空',
			    trigger: 'blur'
			  },
			    {
			      max: 20,
			      message: '长度在 16个字符',
			      trigger: 'blur'
			    }
			  ],
			  phone: [{
			    required: true,
			    message: '手机号不能为空',
			    trigger: 'blur'
			  },
			    {
			      min: 11,
			      message: '长度在 11个字符',
			      trigger: 'blur'
			    }
			  ],
			  email: [{
			    required: true,
			    message: '邮箱不能为空',
			    trigger: 'blur'
			  },
			    {
			      max: 20,
			      message: '长度在20个字符',
			      trigger: 'blur'
			    }
			  ],
			},
			
          }
		  
        },
		methods: {
			
			//回显接口
			getUser(uid){
				this.$axios.get('/user/update/' + uid).then(res =>{
					this.userForm = res.data.data;
					this.updateUser = true;
				})
				
			},
			submitUpdate(formName) {
				  this.$refs[formName].validate((valid) => {
					if (valid) {
					  this.$axios.post('/user/update', this.userForm).then(res => {
						//提示
						this.$message({
						  showClose: true,
						  message: '修改成功',
						  type: 'success',
						});
						//关闭窗口
						this.updateUser = false;
						//清空
						this.userForm = {}
					  })
					} else {
					  console.log('error submit!!');
					  return false;
					}
				  });
				},

		},
		
		created() {	
		  if(this.$store.getters.getUser.username) {
			this.user.uid = this.$store.getters.getUser.id
		    this.user.nickname = this.$store.getters.getUser.nickname
		    this.user.username = this.$store.getters.getUser.username
			this.user.phone = this.$store.getters.getUser.phone
			this.user.email = this.$store.getters.getUser.email
		  }
		  
		}
  }
</script>

<style>
</style>
